<template>
    <div class="disaster-number">
        <div class="disaster-number-item" @click="clickType(1)">
            <div class="disaster-number-panel">
              <span class="disaster-number-title">地震滑坡</span>
              <span class="disaster-number-num">{{landslideNum}}</span>            	  
            </div>           
        </div>
        <div class="disaster-number-item" @click="clickType(2)">
            <div class="disaster-number-panel">
            	<span class="disaster-number-title">砂土液化</span>
              <span class="disaster-number-num">{{liquefyingNum}}</span>          
            </div>           
        </div>
        <div class="disaster-number-item" @click="clickType(3)">
            <div class="disaster-number-panel">
            	<span class="disaster-number-title">软土震陷</span>
              <span class="disaster-number-num">{{seismicSubsidenceNum}}</span>           
            </div>            
        </div>
        <div class="disaster-number-item" @click="clickType(4)">
            <div class="disaster-number-panel">
            	<span class="disaster-number-title">地表破裂带</span>
              <span class="disaster-number-num">{{breakNum}}</span>           
            </div>           
        </div>
    </div>
</template>
<script setup>
import { getDisasterNum } from '@/api/geologicalDisaster.js';
const props = defineProps({
    data: {
        default: {},
        type: Object,
    }
})
const landslideNum = ref('')
const liquefyingNum = ref('')
const seismicSubsidenceNum = ref('')
const breakNum = ref('')
const emit = defineEmits(['getType']);
const getData = () => {
	getDisasterNum({code:"510000"}).then((res) => {
		//console.log(res.data)
		landslideNum.value = res.data.landslideNum;
		liquefyingNum.value = res.data.liquefyingNum;
		seismicSubsidenceNum.value = res.data.seismicSubsidenceNum;
		breakNum.value = res.data.breakNum;
    
  });
}

getData();
function clickType(val){
	emit("getType", val);
}
</script>
<style lang='scss' scoped>
.disaster-number{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 10px;
    &-item{
        width: 210px;
        height: 95px;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
        color: #FFFFFF;
        
        &:nth-child(1){
          background-size: 100% 100%;
      		background-image: url(/src/assets/images/dzzh/dzhp.png);
        }
        &:nth-child(2){
					/*background-size: 100% 100%;*/
      		background-image: url(/src/assets/images/dzzh/styh.png);
        }
				&:nth-child(3){
					background-size: 100% 100%;
      		background-image: url(/src/assets/images/dzzh/rtzx.png);
        }
        &:nth-child(4){
					background-size: 100% 100%;
      		background-image: url(/src/assets/images/dzzh/dbpld.png);
      		.disaster-number-title{
	            width: 90px;
	            right: 10px;
	        }
        }
        margin-left: 5px;
        margin-bottom: 10px;
        cursor: pointer;
        span{
            display: block;
        }
    }
    &-panel{
        width: 105px;
        height: 95px;
        margin-left: 105px;
        text-align: center;
        position: relative;
        .disaster-number-title{
            display: block;
            width: 75px;
						height: 30px;
						background-size: 100% 100%;
      			background-image: url(/src/assets/images/dzzh/bgbox.png);
						font-size: 16px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #46FFFF;
						line-height: 30px;
						text-align: center;
            position: absolute;
            top: 16px;
            right: 16px;
        }
        .disaster-number-num{
        		display: block;
            position: absolute;           
						font-size: 26px;
						font-family: Helvetica Neue LT Pro-55 Roman, Helvetica Neue LT Pro;
						font-weight: normal;
						color: #46FFFF;
						-webkit-background-clip: text;
						top: 51px;
            left: 0;
            right: 0;
        }
        
    }
}
</style>